/**
 * Created by wlh on 16/3/10.
 */

var React = require("react");

var App = {};

var ItemBlock = React.createClass({
    displayName: "ItemBlock",
    getInitialState: function() {
        return {
            val: this.props.val || null
        }
    },
    render: function() {
        var val  = this.state.val;
        var bg;
        if (val == 2) {
            bg = 'orange';
        } else if(val == 4) {
            bg = 'yellow';
        } else if (val == 8) {
            bg = 'pink';
        } else {
            bg = 'red';
        }
        var ret;
        if (val) {
            ret = <div className={"col-xs-3 numItem "} style={{"backgroundColor": bg}} val={val}>{val}</div>;
        } else {
            ret = <div className="col-xs-3 numItem">&nbsp;</div>;
        }
        return ret;
    }
})

App.Container = React.createClass({
    displayName: "Container",
    getInitialState: function() {
        if (this.props.values && this.props.values.length) {
            return {
                values: this.props.values,
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 0,
                totalScore: 0,
                gameOver: false
            }
        }

        //默认值
        return {
            values: [[0, 0, 0, 0],[0, 0, 0, 0],[0, 0, 0, 0],[0, 0, 0, 0]]
        }
    },
    render: function() {
        var rs;
        if (this.state.gameOver) {
            rs = <div>Game Over!</div>
        } else {
            rs = this.state.values.map(function(row) {
                var cols = row.map(function(col) {
                    return <ItemBlock val={col}  key={uniqueId('div-')}></ItemBlock>
                });
                return <div className="row" key={uniqueId("div-")}>{cols}</div>;
            });
        }

        return (<div
            onTouchEnd={this.handleTouchEnd}
            onTouchStart={this.handleTouchStart}>
            <div className="text-center"><h6>当前份数是:<span>{this.state.totalScore}</span>分</h6></div>
            <br/><br/>
            <div>{rs}</div>
        </div>)
    },
    handleTouchStart: function(e) {
		e.preventDefault();
        var x1 = e.nativeEvent.touches[0].clientX;
        var y1 = e.nativeEvent.touches[0].clientY;
        if (!this.point) {
            this.point = {};
        }
        this.point.x1 = x1;
        this.point.y1 = y1;
    },
    handleTouchEnd: function(e) {
		e.preventDefault();
        if (!this.point) {
            return;
        }
        this.point.x2 = e.nativeEvent.changedTouches[0].clientX;
        this.point.y2 = e.nativeEvent.changedTouches[0].clientY;
        this.handleMove(this.getDirect(this.point.x1, this.point.y1, this.point.x2, this.point.y2));
    },
    handleMove: function(direct) {
        var vals = this.state.values;
        var totals = this.state.totalScore;
        var gameOver = this.state.gameOver;

        switch(direct) {
            case 'right':
                //合并数据
                for(var i=3; i>=0; i--) {
                    for(var j=3; j>=0; j--) {
                        var val = vals[i][j];
                        //如果等于0,不进行操作
                        if (!val || val == 0) {
                            continue;
                        }
                        for(var z=j-1; z>=0; z--) {
                            if (!vals[i][z]) {
                                continue;
                            }

                            if (vals[i][z] != val) {
                                break;
                            }
                            vals[i][j] = val * 2;
                            totals += vals[i][j];
                            vals[i][z] = 0; //干掉
                            break;
                        }
                    }
                }

                //移动位置
                for(var i=3; i>=0; i--) {
                    for(var j=3; j>=0; j--) {
                        var val = vals[i][j];
                        if (val) {
                            continue;
                        }

                        //如果此处为空,则需要移动数据过来此处
                        for(var z=j-1; z >=0; z--) {
                            if (vals[i][z]) {
                                vals[i][j] = vals[i][z];
                                vals[i][z] = 0;
                                break;
                            }
                        }
                    }
                }
                break;

            case "left":
                //合并数据
                for(var i=0; i<=3; i++) {
                    for(var j=0; j<=3; j++) {
                        var val = vals[i][j];
                        //如果等于0,不进行操作
                        if (!val || val == 0) {
                            continue;
                        }
                        for(var z=j+1; z<=3; z++) {
                            if (!vals[i][z]) {
                                continue;
                            }

                            if (vals[i][z] != val) {
                                break;
                            }
                            vals[i][j] = val * 2;
                            totals += vals[i][j];
                            vals[i][z] = 0; //干掉
                            break;
                        }
                    }
                }

                //移动位置
                for(var i=0; i<=3; i++) {
                    for(var j=0; j<=3; j++) {
                        var val = vals[i][j];
                        if (val) {
                            continue;
                        }

                        //如果此处为空,则需要移动数据过来此处
                        for(var z=j+1; z <=3; z++) {
                            if (vals[i][z]) {
                                vals[i][j] = vals[i][z];
                                vals[i][z] = 0;
                                break;
                            }
                        }
                    }
                }
                break;

            case 'down':
                //合并数据
                for(var j=3; j>=0; j--) {
                    for(var i=3; i>=0; i--) {
                        var val = vals[i][j];
                        //如果等于0,不进行操作
                        if (!val || val == 0) {
                            continue;
                        }
                        for(var z=i-1; z>=0; z--) {
                            if (!vals[z][j]) {
                                continue;
                            }

                            if (vals[z][j] != val) {
                                break;
                            }

                            vals[i][j] = val * 2;
                            totals += vals[i][j];
                            vals[z][j] = 0; //干掉
                            break;
                        }
                    }
                }


                //移动位置
                for(var j=3; j>=0; j--) {
                    for(var i=3; i>=0; i--) {
                        var val = vals[i][j];
                        if (val) {
                            continue;
                        }

                        //如果此处为空,则需要移动数据过来此处
                        for(var z=i-1; z >=0; z--) {
                            if (vals[z][j]) {
                                vals[i][j] = vals[z][j];
                                vals[z][j] = 0;
                                break;
                            }
                        }
                    }
                }
                break;

            case 'up':
                //合并数据
                for(var j=0; j<=3; j++) {
                    for(var i=0; i<=3; i++) {
                        var val = vals[i][j];
                        //如果等于0,不进行操作
                        if (!val || val == 0) {
                            continue;
                        }
                        for(var z=i+1; z<=3; z++) {
                            if (!vals[z][j]) {
                                continue;
                            }

                            if (vals[z][j] != val) {
                                break;
                            }

                            vals[i][j] = val * 2;
                            totals += vals[i][j];
                            vals[z][j] = 0; //干掉
                            break;
                        }
                    }
                }

                //移动位置
                for(var j=0; j<=3; j++) {
                    for(var i=0; i<=3; i++) {
                        var val = vals[i][j];
                        if (val) {
                            continue;
                        }

                        //如果此处为空,则需要移动数据过来此处
                        for(var z=i+1; z <=3; z++) {
                            if (vals[z][j]) {
                                vals[i][j] = vals[z][j];
                                vals[z][j] = 0;
                                break;
                            }
                        }
                    }
                }
                break;
        }

        var spaces = [];
        //每次移动随机生成2个2
        for(var i=0; i<=3; i++) {
            for(var j=0; j<=3; j++) {
                //遍历把所有没有填充的坐标记录下来,然后随机填充
                if (!vals[i][j]) {
                    spaces.push([i, j]);
                }
            }
        }
		
        if (spaces.length <= 0) {
            gameOver = true;
        } else {
            var lng = spaces.length;
            var idx = parseInt(Math.random() * lng)
            vals[spaces[idx][0]][spaces[idx][1]] = 2;
        }

        this.setState({gameOver: gameOver, values: vals, totalScore: totals});
    },
    getDirect: function(x1, y1, x2, y2) {
        var distance = x1 - y1;
        var height = y1 - y2;

        var xDirect;
        var yDirect;

        if (distance < 0 ) {
            xDirect = 'right';
            distance = -distance;
        } else {
            xDirect = 'left';
        }

        if (height < 0) {
            yDirect = 'down';
            height = -height;
        } else {
            yDirect = 'up';
        }

        if (height > distance) {
            return yDirect;
        }

        return xDirect;
    }
});

function uniqueId(prefix) {
    return prefix + Math.random();
}

export default App;